<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in lunboList" :key="item.id">
        <img :src="item.img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 六宫格 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
          <img src="../assets/images/menu1.png">
        <p>新闻资讯</p>
      </van-grid-item>
      <van-grid-item>
          <img src="../assets/images/menu2.png">
        <p>图片分享</p>
      </van-grid-item>
       <van-grid-item>
          <img src="../assets/images/menu3.png">
        <p>商品购买</p>
      </van-grid-item>
       <van-grid-item>
          <img src="../assets/images/menu4.png">
        <p>留言反馈</p>
      </van-grid-item>
       <van-grid-item>
          <img src="../assets/images/menu5.png">
        <p>视频专区</p>
      </van-grid-item>
       <van-grid-item>
          <img src="../assets/images/menu6.png">
        <p>联系我们</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lunboList: []
    };
  },
  created() {
    this.getLunbo();
  },
  methods: {
    async getLunbo() {
      // 发送请求获取轮播图数据
      const { data: res } = await this.$http.get("/api/getlunbo");
      console.log(res);
      this.lunboList = res.message;
    }
  }
};
</script>>

<style lang="less">
.my-swipe .van-swipe-item {
  height: 200px;
}
.van-swipe-item img {
  width: 100%;
  height: 100%;
}
.van-grid-item {
    width: 120px;
    height: 136px;
    img {
        width: 60px;
        height: 58px;
    }
}
</style>
